/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

@import "utils";
@import "common";
@sprite_image: "../src/bg.png";
@logo_image: "../src/logo.png";
@highlight_color: #ff5113;
body {
    font-size: 12px;    
    line-height: 1.5;
    color: #404040;
    background: url("../src/bg_noise.gif") 0 0 repeat #000;

    a {
        color: #404040;
        font-size: 12px;    
        line-height: 1.5;
        text-decoration: none;
    }
}
#page-header {
    @height: 35px;
    background-color: #000;
    height: @height;
    text-align: center;
    // 阴影

    .block-wrapper {
        margin: 0 auto;    
        width: 960px;
        overflow: hidden;
    }

    h1 {
        float: left;    
        width: 130px;
        height: @height;

        a {
            width: 100%;
            height: 100%;
            display: block;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    h2 {
        margin-left: 18px;
        float: left;    
        font-size: 12px;
        line-height: @height;
        color: #969696;
    }
}

#page-body {
    .block {
        text-align: center;    

        .block-wrapper {
            text-align: left;    
            margin: 0 auto;
            width: 960px;
            overflow: hidden;

            .block-main {
                float: left;
                overflow: hidden;
            }

            .block-sub {
                float: right;
                width: 200px;
                overflow: hidden;
            }
        }
    }
    #vote {
        background: url(../src/bg_vote.png) 0 0 repeat #fff;
        height: 412px;
        border-bottom: 1px solid #efefef;

        .block-wrapper {
            position: relative;
            .arrow {
                position: absolute;    
                right: 185px;
                top: 40px;
                z-index: 9999;
            }
        }

        .block-main {
            width: 714px;

            .notice {
                margin: 24px 0 17px;
                line-height: 25px;
                background-color: #fff;
                text-indent: 13px;
                color: #5a5a5a;
            }

            #candidate1 {
                float: left;
            }

            #candidate2 {
                float: right;
            }

            .item {
                @color: #fefefe;
                @width: 310px;
                @height: 310px;
                @title-line-height: 28px;
                width: @width;
                height: @height;
                position: relative;

                img {
                    width: @width;
                    height: @height;
                }

                .mask {
                    background-color: #000;
                    position: absolute;
                    height: @title-line-height;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    .opacity-80();
                }

                .item-title {
                    position: absolute;
                    line-height: @title-line-height;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    color: @color;
                    text-indent: 10px;
                }

                .item-description,
                .item-price,
                .item-btn {
                    display: none;    
                    position: absolute;
                    left: 0;
                }

                .item-description {
                    top: 0;
                    padding: 44px 40px 0;    
                    line-height: 2;
                    color: @color;

                }

                .item-price {
                    top: 160px;
                    width: 100%;
                    text-align: center;
                    color: @color;
                    font-size: 14px;
                    line-height: 52px;
                    em {
                        font-size: 26px;
                    }
                }

                .item-btn {
                    top: 214px;
                    text-align: center;
                    width: 100%;
                    a {
                        margin: 0 auto;
                    }
                }

                &.hover {
                    .item-mask {
                        height: 100%;
                        .opacity-80();
                    }
                    .item-description,
                    .item-price,
                    .item-btn {
                        display: block;    
                    }
                }
            }    
        }

        .block-sub {
            height: 100%;
            position: relative;    

            .mask {
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                position: absolute;    
                background-color: #fff;
                .opacity-60();
            }

            #howto {
                left: 0;
                top: 0;
                position: absolute;    
                padding: 32px 20px 0;
                color: #626262;

                h3 {
                    font-size: 16px;
                    text-indent: 14px;
                    color: @highlight_color;
                    margin-bottom: 14px;
                }
                
                p {
                    margin-bottom: 19px;

                    &.special {
                        text-align: center;    
                        margin: 0;
                    }
                }
            }
        }
            
    }

    #last-tops {
        .block-main {
            padding-top: 29px;    
            width: 745px;

            .item {
                position: relative;
                overflow: hidden;
                padding-top: 23px;

                .item-wrapper {
                    border: 2px solid @highlight_color;
                    overflow: hidden;
                    padding: 36px 30px 0 19px;
                    height: 297px;

                    .item-pic {
                        @side_length: 250px;
                        position: relative;
                        float: left;
                        width: @side_length;    
                        height: @side_length;    
                        border: 1px solid #e5e5e5;

                        img {
                            width: @side_length;    
                            height: @side_length;    
                        }

                        .item-onhover {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;    
                            height: 100%;
                            display: none;

                            .mask {
                                width: 100%;    
                                height: 100%;
                                position: absolute;
                                top: 0;
                                left: 0;
                                background-color: #000;
                                .opacity-60();
                            }
                            

                            .item-price {
                                position: absolute;
                                top: 100px;
                                width: 100%;
                                text-align: center;
                                color: #fefefe;
                                font-size: 14px;
                                line-height: 52px;
                                em {
                                    font-size: 26px;
                                }
                            }

                            .item-btn {
                                position: absolute;
                                top: 145px;
                                text-align: center;
                                width: 100%;
                                .btn-link {
                                    margin: 0 auto;
                                    .btn1(82px, 24px)
                                }
                            }
                        }
                    }

                    .item-detail {
                        float: right;    
                        width: 415px;

                        .item-title {
                            font-size: 14px;
                            padding-bottom: 8px;
                            border-bottom: 1px dotted #d2d2d2;
                            margin-bottom: 8px;
                        }

                        .item-description-hd {
                            margin-bottom: 1px;
                            font-size: 16px;
                            color: #c00000;    
                            font-weight: bold;
                        }

                        .item-description-bd {
                            color: #5a5a5a;    
                            height: 135px;
                            overflow: hidden;
                            border-bottom: 1px dotted #d2d2d2;
                            margin-bottom: 13px;
                        }

                        .item-stats {
                            margin-bottom: 17px;
                            color: #9e9e9e;    

                            em {
                                color: @highlight_color;    
                            }
                        }

                        .item-operation {
                            height: 25px;
                            overflow: hidden;
                            margin-bottom: 23px;
                            .btn-link {
                                float: right;    
                                .btn1(100px, 25px);
                                .rounded(3px);
                            }
                        }

                    }
                }

                .item-tag {
                    position: absolute;    
                    left: 304px;
                    top: 0;
                    width: 136px;
                    height: 37px;
                    overflow: hidden;
                    line-height: 28px;
                    background: url("../src/item.png") 0 -71px no-repeat no-repeat transparent;
                    color: #fff;
                    text-align: center;
                }
                .item-ranking {
                    position: absolute;    
                    top: 20px;
                    right: 8px;
                    width: 30px;
                    height: 53px;
                    overflow: hidden;
                    background: url("../src/item.png") -124px -235px no-repeat transparent;
                    span {
                        text-align: center;
                        line-height: 56px;
                        width: 100%;
                        display: block;
                        font-size: 20px;
                        color: #fff;
                        font-weight: bold;
                    }
                }

            }

            #champion {
                margin-bottom: 118px;
            }
        }    
        .block-sub {
            padding-top: 29px;    

            .box {
                position: relative;
                overflow: hidden;
                padding-top: 23px;

                .box-wrapper {
                    border: 2px solid @highlight_color;
                    overflow: hidden;
                    height: 333px;

                    ul {
                        padding: 25px 17px 0 14px;

                        li {
                            position: relative;
                            border-bottom: 1px dotted #d2d2d2;
                            padding-top: 11px;
                            .title {
                                color: #272727;
                                margin-bottom: 1px;
                            }
                            .count {
                                color: #9e9e9e;
                                margin-bottom: 8px;
                                text-indent: 30px;
                            }
                            .vote {
                                position: absolute;
                                right: 0;
                                top: 29px;
                                .btn2(34px, 16px);
                                .rounded(2px);
                                color: #9e9e9e;
                                margin-bottom: 8px;
                            }
                        }
                    }
                }

                .box-tag {
                    position: absolute;    
                    left: 32px;
                    top: 0;
                    width: 136px;
                    height: 37px;
                    overflow: hidden;
                    line-height: 28px;
                    background: url("../src/item.png") 0 -71px no-repeat no-repeat transparent;
                    color: #fff;
                    text-align: center;
                }
            }
        }
    }
    #weibo {
        background-color: #eee;    
        height: 140px;

        h3 {
            img {
                width: 200px;
                height: 80px;
            }    
        }
    }
}

#page-footer {
    text-align: center;
    height: 98px;
}
